/**
 * @name PostList
 * @author 作者
 * @desc 文章列表
 */

import React, { Component, Fragment } from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { Link } from "react-router-dom"
import * as postActions from "../../redux/post-store/actions"
import { TabBadge } from "../../components"

/**
 * redux
 * @property {Object[]} posts 文章列表
 * @property {String} posts[].id 文章id
 * @property {String} posts[].title 文章标题
 * @property {String} posts[].tab 文章分类
 * @property {Function} getPosts 获取文章列表
 */
class PostList extends Component {
  render() {
    const { posts } = this.props

    return (
      <div>
        <h2>post list</h2>
        <button onClick={() => this.props.getPosts()}>get posts</button>

        <ol>
          {posts.map(item => (
            <li key={item.id}>
              <Linker id={item.id} title={item.title} tab={item.tab} />
            </li>
          ))}
        </ol>
      </div>
    )
  }
}

/**
 * @property {String} id
 * @property {String} title
 * @property {String} tab
 */
const Linker = ({ id = "", title = "", tab = "" }) => {
  return (
    <Fragment>
      <Link to={`/post-detail/${id}`}>{title}</Link>
      <TabBadge tab={tab} />
    </Fragment>
  )
}

const mapState = state => ({ ...state.PostStore })
const mapActions = dispatch => bindActionCreators(postActions, dispatch)

export default connect(
  mapState,
  mapActions
)(PostList)
